
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台><router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link>>接口渠道订单数据统计</div>
         <div class="hei10"></div>

				<div class="title" v-if="tableData != ''">{{tableData.channel}}接口渠道订单数据统计</div>
				<div class="t_add_cont" style="padding: 20px;">
          <div class="kflexbc" style="margin-bottom: 20px; color: #ACACAC; font-size: 14px;">
            <div class="kflexc">
              <div style="margin-right: 20px;">
                <el-switch v-model="all.province_produce_switch" active-color="rgb(8, 201, 160)" inactive-color="rgb(220, 220, 220)" :active-value='1' :inactive-value='0'></el-switch>
              </div>
              <div style="color: #565656;">强制省内订单提单比例：</div>
              <div>要求省内提单比例不小于</div>
              <div><el-input v-model="all.province_produce_ratio" style="width: 150px; margin: 0 20px;" type="number" placeholder="输入百分比"><el-button slot="append" style="border: 0;">%</el-button></el-input></div>
              <div style="margin-right: 20px;">计算时间周期</div>
              <div style="margin-right: 20px;">
                  <el-radio v-model="all.statis_range" :label="1">天</el-radio>
                  <el-radio v-model="all.statis_range" :label="2">月</el-radio>
                  <el-radio v-model="all.statis_range" :label="3">全部</el-radio>
              </div>
              <div>低于</div>
              <div><el-input v-model="all.no_limit_num" style="width: 80px; margin: 0 20px;" type="number" placeholder="多少单"></el-input></div>
              <div>不做限制</div>
            </div>
            <div style="background: #C4C4C4; color: #000; padding: 10px 20px; cursor: pointer; border-radius: 5px;" @click="setyujing" v-if="shop_id == 304676 || shop_id == 50481">
              配置预警值
            </div>
          </div>


          <div style="background: #F6F9FC; color: #409BFA; padding: 10px 15px; margin-bottom: 20px; font-size: 12px;">省内订单全提，省外订单根据设置比例，对比省内提交数量，计算应当提单数，例：设置为60%，省内提单60，省外最多提单40，多余订单会在待提单队列，可人工强行提单。</div>
          <div style="font-size: 18px; margin-bottom: 20px;">接口数据</div>
          <div style="line-height: 50px; width: 430px; color: #565656; font-size: 14px;" >
            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">已提交订单:</div>{{tableData.submit_count}}</div>
            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">提交成功:</div>{{tableData.submit_success_count}}</div>
            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">提交异常:</div>{{tableData.submit_fail_count}}</div>

            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">省内订单提单成功数:</div>{{tableData.inner_province_num}}</div>
            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">省外订单提单成功数:</div>{{tableData.outer_province_num}}</div>
            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">省外订单待提数:</div>{{tableData.pending_num}}
              <span style="margin-left: 30px; color: #409BFA; cursor: pointer;" @click="$router.push('/productionBasismanag/qudaodingdanduilie?channel_id='+$route.query.id)">查看待提单队列</span>
            </div>

            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">生产异常:</div>{{tableData.auto_fail_count}}</div>
            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">单号回传成功:</div>{{tableData.callback_success_count}}</div>
            <div style="border-bottom: 1px #E4E3E3 solid;" class="kflexc"><div style="width: 50%;">待回传订单号:</div>{{tableData.callback_count}}</div>
          </div>

					<!-- 列表 -->
					<!-- <el-table
					:header-cell-style="{background:'#F9F9F9',color:'#3D3D3D'}"
					:data="tableData"
					style="width: 100%">


						<el-table-column	align="center"	prop="submit_count"	label="已提交订单"></el-table-column>
            <el-table-column	align="center"	prop="submit_success_count"	label="提交成功"></el-table-column>
            <el-table-column	align="center"	prop="submit_fail_count"	label="提交异常"></el-table-column>
            <el-table-column	align="center"	prop="auto_fail_count"	label="生产异常"></el-table-column>
            <el-table-column	align="center"	prop="callback_success_count"	label="单号回传成功"></el-table-column>
            <el-table-column	align="center"	prop="callback_count"	label="待回传订单号"></el-table-column>
            <el-table-column	align="center" prop="problem" label="预警值">
            	<template slot-scope="scope">
            		<el-button @click="shzezhi(scope.row)" type="text">设置</el-button>
            	</template>
            </el-table-column>

					</el-table> -->

				</div>

			</div>
		</div>


    <el-dialog title="设置预警值" center :visible.sync="zidonglog" width="600px">
        <div style="margin-bottom: 20px;  font-size: 16px;">统计最近48小时内的异常订单占比</div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div>提交异常预警比例大于：</div>
          <el-select v-model="all.submit_warning" placeholder="请选择提交异常预警比例">
            <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div>生产异常预警比例大于：</div>
          <el-select v-model="all.produce_warning" placeholder="请选生产交异常预警比例">
            <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"> </el-option>
          </el-select>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div>回传单号预警比例大于：</div>
          <el-select v-model="all.back_warning" placeholder="请选择回传单号预警比例">
            <el-option  v-for="item in options"  :key="item.value"  :label="item.label"  :value="item.value"> </el-option>
          </el-select>
        </div>

        <div slot="footer" class="dialog-footer">
        	<el-button round type="danger" @click="queding">确定</el-button>
        </div>
    </el-dialog>

	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import foot from '@/components/foot.vue'


	export default {
		components: {
			"left": left,
			"top": top,
			"foot": foot
		},
		name: 'qudaodingdan',
		data() {
			return{
        zidonglog:false,
        all:{
          channel_id:this.$route.query.id,//	int	渠道id
          submit_warning:0,//	int	提交异常预警比例（0~90）
          produce_warning:0,//	int	生产异常预警比例（0~90）
          back_warning:0,//	int	回传异常预警比例（0~90）
          no_limit_num:""
        },
        tableData:"",
        options: [
          {
              value: '100',
              label: '100%'
          },
          {
              value: '90',
              label: '90%'
          },
          {
              value: '80',
              label: '80%'
          },
          {
              value: '70',
              label: '70%'
          },
          {
              value: '60',
              label: '60%'
          },
          {
              value: '50',
              label: '50%'
          },
          {
              value: '40',
              label: '40%'
          },
          {
              value: '30',
              label: '30%'
          },
          {
              value: '20',
              label: '20%'
          },
          {
              value: '10',
              label: '10%'
          },
          {
              value: '0',
              label: '0%'
          },
        ],
        shop_id:JSON.parse(localStorage.getItem('SHOP')).shop_id
			}
		},
		created() {
			//获取列表
			this.getlist()
      this.getyujing()

		},

		methods: {
      getyujing:function(){

        axios.get('/api/plan-market/upstream/channel/info',{
          params:{
            channel_id:this.$route.query.id
          }
        })
        .then((response) => {
        	if(response.data.msg.code == 0){
              this.all = response.data.data
        	}else{
        	    this.$message.error(response.data.msg.info);
        	}
        })
      },
      setyujing:function(){
        let obj = {
          channel_id:this.$route.query.id,//渠道列表id
          province_produce_switch:this.all.province_produce_switch,//开关 1 开 0 关
          province_produce_ratio:this.all.province_produce_ratio,// 百分比数值 正整数
          statis_range:this.all.statis_range,//时间周期 1天 2 月 3全部
          no_limit_num:this.all.no_limit_num
        }
        axios.post('/api/plan-market/upstream/channel/province-produce/ratio/set',obj)
        .then((response) => {
        	if(response.data.msg.code == 0){
              this.$message.success('设置成功');
              this.getlist()
        	}else{
        	    this.$message.error(response.data.msg.info);
        	}
        })

      },
      queding:function(){
        axios.post('/api/plan-market/upstream/channel/warning/config',this.all)
        .then((response) => {
        	if(response.data.msg.code == 0){
              this.$message.success('设置成功');
        	    this.zidonglog = false
        	}else{
        	    this.$message.error(response.data.msg.info);
        	}
        })
      },
      shzezhi:function(){
        axios.get('/api/plan-market/upstream/channel/warning/config?channel_id='+this.$route.query.id)
        .then((response) => {
        	if(response.data.msg.code == 0){
              let item = response.data.data
        	    this.all = {
        	      channel_id:this.$route.query.id,//	int	渠道id
        	      submit_warning:item.submit_warning,//	int	提交异常预警比例（0~90）
        	      produce_warning:item.produce_warning,//	int	生产异常预警比例（0~90）
        	      back_warning:item.back_warning,//	int	回传异常预警比例（0~90）
                no_limit_num:item.no_limit_num
        	    }
              // this.zidonglog = true
        	}else{
        	    this.$message.error(response.data.msg.info);
        	}
        })
      },
			//获取列表
			getlist(){
				axios.get('/api/plan-market/upstream/channel/order/statistics?channel_id='+this.$route.query.id)
				.then((response) => {
					if(response.data.msg.code == 0){
					    this.tableData = response.data.data
					}else{
					    this.$message.error(response.data.msg.info);
					}
				})
			}
		}
	}
</script>


</style>
<style lang="scss" scoped>
  @import url("../../assets/zuixin.scss");
	.index {
    /deep/ .el-input-group__append{ border: 0;}
    .title {
    	border-bottom: 1px #EAEAEA solid;
    	line-height: 45px;
    	padding-left: 30px;
    	font-size: 16px;
    	background: #F9F9F9;
    	color: #727272
    }
	}
</style>
